<template>
	<div class="app">
		<div class="title">
			<!-- 点击查找部分开始-->
			<div class="serarch">
				<el-input placeholder="请输入类目ID" class="orders" v-model="category" clearable></el-input>
				<el-input placeholder="请输入类目名称" class="orders" v-model="categoryname" clearable></el-input>
				<el-select v-model="value" clearable placeholder="请选择类目级别" class="orders">
					<el-option v-for="item in categorylevel" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
            <el-cascader :options="categoryfather" v-model="values" :props="{ checkStrictly: true }" clearable></el-cascader>
				<el-button type="primary" icon="el-icon-search" @click="searchlogo">查找</el-button>
				<el-button type="primary" icon="el-icon-search" @click="addlogo()">添加</el-button>
			</div>
			<!-- 点击查找部分结束-->
			<!-- 页面表格部分开始 -->
			<el-table :data="tableData" border style="width: 100%; font-size:12px">
				<el-table-column prop="value" label="类目ID" align="center">
				</el-table-column>
				<el-table-column prop="label" label="类目名称" align="center" width="250">
					<template slot-scope="scope">
						<el-tag disable-transitions>{{scope.row.label}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="fullName" label="全类目名" align="center" width="220">
					<template slot-scope="scope">
						<el-tag disable-transitions>{{scope.row.fullName}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="parent" label="父类目ID" align="center">
				</el-table-column>
				<el-table-column prop="level" label="级别" align="center">
					<template slot-scope="scope">
						<el-tag>
							{{scope.row.level == 0? "一级类目" : scope.row.level == 1? "二级类目": "三级类目"}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="" label="标志图片" align="center">
          <template slot-scope="scope" >
						<img style="width:80px" :src="scope.row.iconUrl"/>
					</template>
				</el-table-column>
				<el-table-column label="类目图片" align="center">
					<template slot-scope="scope" >
						<img style="width:80px" :src="scope.row.picUrl"/>
					</template>
				</el-table-column>
				<el-table-column prop="" label="操作" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="edit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="deletes(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 页面表格部分结束 -->
			<!-- 添加&编辑的弹框部分开始 -->
			<el-dialog :title="bools ? '创建' : '编辑'" :visible.sync="dialogFormVisible">
				<el-form :model="form" :rules="rules" ref="form" label-width="100px">
					<!-- 类目名称 -->
					<el-form-item prop="label" label="类目名称" :label-width="formLabelWidth">
						<el-input v-model="form.label" autocomplete="off" class="DialogInput" style="width:250px"></el-input>
					</el-form-item>
          <!-- 类目图片 -->
          <el-form-item prop="picUrl" label="类目图片" :label-width="formLabelWidth">
						<el-upload class="avatar-uploader" action="http://192.168.1.84:8081/upload/admin" :show-file-list="false"
						 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="form.picUrl" :src="form.picUrl" class="avatar"/>
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
          <!-- 父类目 -->
          <el-form-item  label="父类目" :label-width="formLabelWidth">
					    <el-cascader :options="categoryfather" v-model="form.values" :props="{ checkStrictly: true }" clearable placeholder="选择父类目，默认一级类目" style="width:250px"></el-cascader>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="closeing('form')">取 消</el-button>
					<el-button type="primary" @click="makesure('form')">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 添加&编辑的弹框部分结束 -->
			<!-- 分页部分内容开始 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :total="total"
				 :current-page="pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
			</div>
			<!-- 分页部分内容结束 -->
		</div>
	</div>
</template>


<script>
import {renderinglist,addlist,modifylist,categorysecondlist,deleteslist} from '../encapsulation/category'
export default {
  data() {
    return {
        tableData:[],
        imageUrl:'',
        pageNo: 1, // 默认页数
        pageSize: 20, // 页面条数
        total: 0, // 总共条数
        category: "", //类目ID
        categoryname: "", //类目名称
        dialogFormVisible: false, //点击隐藏添加对话框
        bools: true, //判断弹框的布尔值
        value:'', //类目级别绑定的value值
        values:'',  //父级类目绑定的value值
        categoryfather: [], //父级类目
        formLabelWidth: "120px", //控制label的宽度
        categorylevel: [  //类目级别
        {
          value: 0,
          label: "一级类目",
        },
        {
          value: 1,
          label: "二级类目",
        },
        {
          value: 2,
          label: "三级类目",
        },
      ],
      // 弹框的内容
      form: {
        label:'',  //商品名称
        picUrl:'',  //类目图片不能为空
        parent:'', //父类目
        values:'',//父类目存储的值
        id:"",
      },
      // 表单验证
      rules: {
        title: [
          {
            required: true,
            message: "商品名称不能为空",
          },
        ]
      },
    };
  },
  methods: {
    //表格数据列表渲染
      getlist() {
      let data = {
        pageNo: this.pageNo, //订单页码
        limit: this.pageSize, //页码长度
        id:this.category,  //类目ID
        title:this.categoryname,  //类目名称
        level:this.value,  //类目等级
        parentId:this.values  //父级类目ID
      };
      renderinglist(data).then((res) => {
        this.tableData = res.data.data.items;
        this.total = res.data.data.total;
      });
      categorysecondlist().then((res)=>{
        this.categoryfather = res.data.data;
      })
    },
     //点击取消
    closeing(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    //   查找
    searchlogo(){
      (this.pageNo = 1), (this.limit = 20), this.getlist();
    },
    	makesure(form) {
		let _this = this;
		this.$refs[form].validate((valid) => {
			if (valid) {
				if (_this.bools) {
					// 点击添加
					_this.$refs[form].validate((valid) => {
						if (valid) {
							let data = {
                title:this.form.label,
                parentId :this.form.values,
                picUrl:this.form.picUrl,
							};
							addlist(data).then((res) => {
								if (res.data.errmsg === "成功") {
									(_this.dialogFormVisible = false), console.log(res);
									_this.$message.success({
										message: "添加成功",
									});
									_this.getlist();
								}
								_this.$refs[form].resetFields();
							});
						} else {
							console.log("error submit!!");
							return false;
						}
					});
				} else {
					// 编辑
					let data = {
                title:this.form.label,  //类目名称
                parentId:this.form.values,  //父类目
                picUrl:this.form.picUrl,  //类目图片
                id:this.form.id
					};
					modifylist(data).then((res) => {
            console.log(res)
						_this.getlist();
						this.dialogFormVisible = false;
						_this.$message.success({
							message: "更新成功",
						});
						_this.$refs[form].resetFields();
					});
				}
			}
		});
  },
  // 删除
      deletes(index, row) {
      let _this = this;
      let data = {
        id: row.value,
      };
      _this
        .$confirm(
          "此操作将永久删除该类目---" + row.label + "---, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
        .then(() => {
          deleteslist(data).then((res) => {
			  if(res==null){
			    this.$message.error('该类目还有子类目或着商品 异常代码：51001');
			    
			  }else{
			    if(res.data.errno==200){
			    this.getlist()
			    this.$message.success({
			         message: '删除成功!'
			       });
			     }
			  }
          });
          this.getlist();
        })
        .catch(() => {
          this.$message("您已取消删除");
        });
    },
	
    // 添加弹框
    addlogo(){
      this.bools = true;
      this.dialogFormVisible = true;
      this.form.label = '', //类目名称
      this.form.picUrl = '',  //类目图片
      this.form.values = '', //父类目存储的值
      this.form.parent = ''//父类目
    },
    // 编辑弹框
    edit(index, row) {
      console.log(row)
      this.bools = false;
      this.dialogFormVisible = true;
      this.form.label = row.label //类目名称
      this.form.values = row.parent,  //父类目  ---
      this.form.picUrl = row.picUrl  //类目图片
      this.form.id = row.value
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getlist();
    },
    // 照片上传
    handleAvatarSuccess(res) {
      this.form.picUrl = res.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created(){
      this.getlist()
  }
};
</script>
<style scoped lang="less">
.app {
  padding: 20px;
  height: 100%;
  overflow: hidden !important;
  position: relative;
}

.title {
  position: absolute;
  left: 0;
  top: 0;
  right: -17px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 20px;
}
.serarch {
  display: flex;
}
.orders {
  width: 200px;
  margin: 0 5px;
}
.el-table{
margin-top:20px;
}
.block{
  margin-top: 10px;
}
.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
</style>